<template>
  <div>
    <div class="box" v-for="(item,index) in storedata">
            <div class="right">
                <div class="fl">
                    <div class="top_box">
                        <router-link  class="top_box" :to="{ name: 'ShopDetails',query:{store_id:item.store_id}}">
                          <div class="left">
                              <img :src="item.logo" alt="">
                          </div>

                          <h3 class="shop_name">{{item.name}}</h3>
                        </router-link>
                    </div>
                    <span>{{item.timemsg}}</span>
                </div>
                <p class="info_p" v-show="item.slice_show">{{item.slice_content}}</p>
                <p class="info_p" v-show="item.content_show">{{item.content}}</p>
                <a href="javascript:;" class="quanwen" @click="handleFold(index)" v-show="item.slice_show && item.is_slice">全文</a>
                <a href="javascript:;" class="quanwen" @click="handleFold(index)" v-show="item.content_show && item.is_slice">收起</a>
                <div class="img_box">
                    <img :src="img" alt="" v-for="(img,i) in item.thumb" :key="i" @click="handleImgsClick(item.thumb,i)">
                </div>
                <p class="read_p">{{item.views}}人看过</p>
            </div>
        </div>
  </div>
</template>
<script>

export default {
    data(){
        return {}
    },
    props:{
      'storedata':Array,
    },
    methods:{
       handleImgsClick(imgs,index) {
        this.initialIndex = index
        const params = {
          $props: {
            imgs: imgs,
            initialIndex: 'initialIndex', // 响应式数据的key名
            loop: false
          },
          $events: {
            change: (i) => {
              // 必须更新 initialIndex
              this.initialIndex = i
            }
          }
        }
        this.$createImagePreview({ ...params
        }).show()
      },
      //查看全部收起功能
      handleFold(index) {
        this.storedata[index].slice_show = !this.storedata[index].slice_show;
        this.storedata[index].content_show = !this.storedata[index].content_show;
        },
    },
    mounted() {
        const that = this;
        //获取屏幕的宽度
        window.onresize = () => {
          return (() => {
              window.screenWidth = document.body.clientWidth;
              that.screenWidth = window.screenWidth;
            })();
        }
        if(that.screenWidth && that.screenWidth == 320){
            that.maxLen_v = 31;
            that.maxLen = 31;
        }
    }
}
</script>
<style scoped>
.wrapper{

}
.box {
  position: relative;
  padding: .8rem 0;
  background: #FFFFFF;
  margin-bottom: .4rem;
}

.box .left {
  width: 1.44rem;
  height: 1.44rem;
  border-radius: 50%;
  position: absolute;
  top: .7rem;
  left: .64rem;
}

.box .left img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.box .right {
  margin-left: 2.44rem;
  text-align: left;
  padding-right: 1.28rem;
}
.box .right .fl{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 1.44rem;
}
.box .right .fl .shop_name {
  font-size: .64rem;
  color: #292929;
  font-weight: 600;
}
.box .right .fl > span{
    font-size: .48rem;
    color: #818181;
    font-weight: 500;
}

.box .right .info_p {
  font-size: .64rem;
  color: #292929;
  margin-top: .64rem;
  margin-bottom: .32rem;
  line-height: .98rem;
  word-wrap: break-word;
  word-break: break-all;
}

.box .right .img_box {
  overflow: hidden;
  font-size: 0;
}
.box .right .img_box img{
  display: inline-block;
  width: 3.2rem;
  height: 3.16rem;
  margin-right: .36rem;
  margin-bottom: .36rem;
  border-radius: .1rem;
}

.box .right .quanwen {
  display: inline-block;
  font-size: .56rem;
  font-weight: bold;
  color: #4CC954;
  margin-bottom: .8rem;
}
.box .right .read_p{
    font-size: .48rem;
    font-weight: 500;
    color: #818181;
    text-align: left;
    margin-top: .8rem;
}
</style>
